<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Jx.Menu Examples</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="../../lib/mootools-core.js"></script>
<script type="text/javascript" src="../../lib/mootools-more.js"></script>
<script type="text/javascript" src="../../lib/jxlib.standalone.uncompressed.js"></script>
<script src="js/tests.js" type="text/javascript" charset="utf-8"></script>
<script src="js/locale.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.addEvent('load', function() {
    menuContext();
});
if($(document).getElements('.tabContentActiveExamples').length > 0) {
  $(document).getElements('.tabContentActiveExamples')[0].addEvent('loadAjax', function() {
    menuContext();
  });
}
</script>

<script id="menuContextScript" type="text/javascript">
function menuContext() {
    /* put together some sub menus for the context menu */
    var fileMenu = new Jx.Menu.SubMenu({label: {set:'Examples',key:'menu',value:'file'}});
    fileMenu.add([
        new Jx.Menu.Item({
            label: {set:'Examples',key:'menu',value:'new'},
            imageClass: 'file-new', 
            image: 'images/file-edit-menu.png',
            onClick: function() {log('new file');}}),
        new Jx.Menu.Item({
            label: {set:'Examples',key:'menu',value:'open'},
            imageClass: 'file-open', 
            image: 'images/file-edit-menu.png',
            onClick: function() {log(this.getText({set:'Examples',key:'menu',value:'open'}))}}),
        new Jx.Menu.Item({
            label: {set:'Examples',key:'menu',value:'save'},
            imageClass: 'file-save', 
            image: 'images/file-edit-menu.png',
            onClick: function() {log('save file');}}),
        new Jx.Menu.Item({
            label: {set:'Examples',key:'menu',value:'saveAs'},
            imageClass: 'file-save-as', 
            image: 'images/file-edit-menu.png',
            onClick: function() {log('save as');}}),
        new Jx.Menu.Separator(),
        new Jx.Menu.Item({
            label: {set:'Examples',key:'menu',value:'print'},
            imageClass: 'file-print', 
            image: 'images/file-edit-menu.png',
            onClick: function() {log('print file');}}),
        new Jx.Menu.Item({
            label: {set:'Examples',key:'menu',value:'printPreview'},
            imageClass: 'file-print-preview', 
            image: 'images/file-edit-menu.png',
            onClick: function() {log('new file');}}),
        new Jx.Menu.Separator(),
        new Jx.Menu.Item({
            label: {set:'Examples',key:'menu',value:'properties'},
            imageClass: 'file-properties', 
            image: 'images/file-edit-menu.png',
            onClick: function() {log('file properties');}})]
    );
    var editMenu = new Jx.Menu.SubMenu({label: {set:'Examples',key:'menu',value:'edit'}});
    editMenu.add([
        new Jx.Menu.Item({
            label: {set:'Examples',key:'menu',value:'undo'},
            imageClass: 'edit-undo', 
            image: 'images/file-edit-menu.png', 
            enabled: false,
            onClick: function() {log('edit undo');}}),
        new Jx.Menu.Item({
            label: {set:'Examples',key:'menu',value:'redo'},
            imageClass: 'edit-redo', 
            image: 'images/file-edit-menu.png', 
            enabled: false,
            onClick: function() {log('edit redo');}}),
        new Jx.Menu.Separator(),
        new Jx.Menu.Item({
            label: {set:'Examples',key:'menu',value:'cut'},
            imageClass: 'edit-cut', 
            image: 'images/file-edit-menu.png',
            onClick: function() {log('edit cut');}}),
        new Jx.Menu.Item({
            label: {set:'Examples',key:'menu',value:'copy'},
            imageClass: 'edit-copy', 
            image: 'images/file-edit-menu.png',
            onClick: function() {log('edit copy');}}),
        new Jx.Menu.Item({
            label: {set:'Examples',key:'menu',value:'paste'},
            imageClass: 'edit-paste', 
            image: 'images/file-edit-menu.png',
            onClick: function() {log('edit paste');}})]
    );
    
    var fontMenu = new Jx.Menu.SubMenu({label: {set:'Examples',key:'menu',value:'font'}});
    fontMenu.add([
        new Jx.Menu.Item({
            label: {set:'Examples',key:'menu',value:'bold'},
            toggle: true,
            imageClass: 'format-text-bold', 
            image: 'images/file-edit-menu.png',
            onClick: function() {log('format bold');}}),
        new Jx.Menu.Item({
            label: {set:'Examples',key:'menu',value:'italic'},
            toggle: true,
            imageClass: 'format-text-italic', 
            image: 'images/file-edit-menu.png',
            onClick: function() {log('format italic');}}),
        new Jx.Menu.Item({
            label: {set:'Examples',key:'menu',value:'strikethrough'},
            toggle: true,
            imageClass: 'format-text-strikethrough', 
            image: 'images/file-edit-menu.png',
            onClick: function() {log('strikethrough');}}),
        new Jx.Menu.Item({
            label: {set:'Examples',key:'menu',value:'underline'},
            toggle: true,
            imageClass: 'format-text-underline', 
            image: 'images/file-edit-menu.png',
            onClick: function() {log('underline');}})]
    );
    
    var justifyLeft = new Jx.Menu.Item({
        label: {set:'Examples',key:'menu',value:'left'},
        toggle: true,
        imageClass: 'format-justify-left', 
        image: 'images/file-edit-menu.png',
        onClick: function() {log('justify left');}
    });
    var justifyCenter = new Jx.Menu.Item({
        label: {set:'Examples',key:'menu',value:'center'},
        toggle: true,
        imageClass: 'format-justify-center', 
        image: 'images/file-edit-menu.png',
        onClick: function() {log('justify center');}
    });
    var justifyRight = new Jx.Menu.Item({
        label: {set:'Examples',key:'menu',value:'right'},
        toggle: true,
        imageClass: 'format-justify-right', 
        image: 'images/file-edit-menu.png',
        onClick: function() {log('justify right');}
    });
    var justifyFill = new Jx.Menu.Item({
        label: {set:'Examples',key:'menu',value:'fill'},
        toggle: true,
        imageClass: 'format-justify-fill', 
        image: 'images/file-edit-menu.png',
        onClick: function() {log('justify fill');}
    });
    new Jx.ButtonSet().add(
        justifyLeft, justifyCenter, justifyRight, justifyFill
    );
    
    var justifyMenu = new Jx.Menu.SubMenu({label: {set:'Examples',key:'menu',value:'align'}});
    justifyMenu.add([justifyLeft, justifyCenter, justifyRight, justifyFill]);
    
    var formatMenu = new Jx.Menu.SubMenu({label: {set:'Examples',key:'menu',value:'font'}});
    formatMenu.add([
        new Jx.Menu.Item({
            label: {set:'Examples',key:'menu',value:'intendMore'},
            toggle: true,
            imageClass: 'format-indent-more', 
            image: 'images/file-edit-menu.png',
            onClick: function() {log('intend more');}}),
        new Jx.Menu.Item({
            label: {set:'Examples',key:'menu',value:'intendLess'},
            toggle: true,
            imageClass: 'format-indent-less', 
            image: 'images/file-edit-menu.png',
            onClick: function() {log('intend less');}}),
        fontMenu, 
        justifyMenu]
    );
    
    /* you can specify the id of the element to attach the context menu
     * to in the constructor
     */
    var contextMenu = new Jx.Menu.Context(document.body);
    contextMenu.add([fileMenu,editMenu,formatMenu]);   
}
</script>
</head>
<body>
<div>
  <h1>Jx.Menu.Context Examples</h1>
  <p>API Reference: <a id="menu-context-js" href="javascript:void();" title="link to API Reference">Jx.Menu.Context</a>, <a id="menu-submenu-js" href="javascript:void();" title="link to API Reference">Jx.Menu.SubMenu</a>, <a id="menu-item-js" href="javascript:void();" title="link to API Reference">Jx.Menu.Item</a>, <a id="menu-separator-js" href="javascript:void();" title="link to API Reference">Jx.Menu.Separator</a> Extends <a id="menu-js" href="javascript:void();" title="link to API Reference">Jx.Menu</a></p>
  <h2 id="menuContext">Context Menus</h2>
  <p id="contextMenuText">Context menus are menus that pop up when the user clicks the right mouse button.  A context menu has been added to the content of this page, go ahead and try it out - it should work on this text and above.</p>
</div>
</body>
</html>
